<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

        body {
            background: #000;
            overflow: hidden;
        }

        #instructions {
            position: absolute;
            width: 100%;
            top: 50%;
            margin: auto;
            margin-top: 80px;
            font-family: "Open Sans", sans-serif;
            color: #AAA;
            font-size: 1.1em;
            text-transform: uppercase;
            text-align: center;
            line-height: 130%;
        }

        #bgr {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(#000, #111, #222, #000);
        }

        #raftHolder {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100px;
            height: 50px;
            overflow: hidden;
        }

        #raft {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            transform: rotate(-5deg);
            -webkit-animation-name: raftFloat;
            animation-name: raftFloat;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            animation-direction: alternate;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
        }

        #raftBottom {
            position: absolute;
            margin: auto;
            top: 34px;
            bottom: 0;
            left: 0;
            right: 0;
            width: 0px;
            height: 0px;
            border-bottom: 20px solid #555;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

        #raftBottom::before {
            content: "";
            position: absolute;
            margin: auto;
            width: 0px;
            height: 0px;
            left: -40px;
            border-top: 20px solid #2A2A2A;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

        #raftBottom::after {
            content: "";
            position: absolute;
            margin: auto;
            width: 0px;
            height: 0px;
            border-top: 20px solid #888;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

        #raftTop {
            position: absolute;
            margin: auto;
            top: -7px;
            left: 20px;
            right: 0;
            bottom: 0;
            width: 0px;
            height: 0px;
            border-bottom: 20px solid #fff;
            border-right: 20px solid transparent;
        }

        #raftTop::before {
            content: "";
            position: absolute;
            margin: auto;
            width: 0px;
            height: 0px;
            left: -20px;
            border-bottom: 20px solid #333;
            border-left: 20px solid transparent;
        }

        #raftRipples {
            position: absolute;
            margin: auto;
            top: 50px;
            bottom: 0;
            left: 0;
            right: 100px;
            width: 200px;
            height: 50px;
        }

        .raftRipple {
            position: absolute;
            margin: auto;
            width: 0px;
            height: 4px;
            border-radius: 2px;
            opacity: 0.1;
            background: #fff;
            -webkit-animation-name: raftRippleMove;
            animation-name: raftRippleMove;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
        }

        .raftRipple:nth-child(1) {
            top: 30px;
            left: 120px;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }

        .raftRipple:nth-child(2) {
            top: 24px;
            left: 120px;
            -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
        }

        #raftReflection {
            position: absolute;
            margin: auto;
            top: 90px;
            bottom: 0;
            right: 0;
            left: 10px;
            width: 100px;
            height: 50px;
        }

        .raftReflectionSegment {
            position: absolute;
            margin: auto;
            height: 4px;
            border-radius: 2px;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            -webkit-animation-name: raftReflectionMove;
            animation-name: raftReflectionMove;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            animation-direction: alternate;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
        }

        .raftReflectionSegment:nth-child(1) {
            top: -30px;
            width: 35px;
            opacity: 0.1;
        }

        .raftReflectionSegment:nth-child(2) {
            top: -16px;
            width: 45px;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
            opacity: 0.05;
        }

        .raftReflectionSegment:nth-child(3) {
            top: -2px;
            width: 60px;
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            opacity: 0.02;
        }

        @-webkit-keyframes raftReflectionMove {
            0% {
                transform: scale(1.2, 1) translate(5px);
            }

            100% {
                transform: scale(1, 1) translate(-10px);
            }
        }

        @keyframes raftReflectionMove {
            0% {
                transform: scale(1.2, 1) translate(5px);
            }

            100% {
                transform: scale(1, 1) translate(-10px);
            }
        }

        @-webkit-keyframes raftRippleMove {
            0% {
                width: 0px;
            }

            70% {
                width: 50px;
            }

            100% {
                transform: translate(-100px);
                width: 0px;
                opacity: 0;
            }
        }

        @keyframes raftRippleMove {
            0% {
                width: 0px;
            }

            70% {
                width: 50px;
            }

            100% {
                transform: translate(-100px);
                width: 0px;
                opacity: 0;
            }
        }

        @-webkit-keyframes raftFloat {
            0% {
                transform: rotate(3deg) translate(10px, -2px);
            }

            100% {
                transform: rotate(-3deg) translate(-5px);
            }
        }

        @keyframes raftFloat {
            0% {
                transform: rotate(3deg) translate(10px, -2px);
            }

            100% {
                transform: rotate(-3deg) translate(-5px);
            }
        }

        #sploutch {
            position: absolute;
            width: 300px;
            height: 300px;
            -webkit-animation-name: panSploutch;
            animation-name: panSploutch;
            -webkit-animation-duration: 6s;
            animation-duration: 6s;
        }

        @-webkit-keyframes panSploutch {
            to {
                transform: translateX(-300px);
            }
        }

        @keyframes panSploutch {
            to {
                transform: translateX(-300px);
            }
        }

        .drop {
            position: absolute;
            background: #fff;
            width: 2px;
            height: 40px;
            opacity: 0;
            left: 150px;
            -webkit-animation-name: fall;
            animation-name: fall;
            -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        @-webkit-keyframes fall {
            0% {
                top: -100px;
                opacity: 0;
                height: 100px;
            }

            99% {
                opacity: 1;
            }

            100% {
                top: 150px;
                opacity: 0s;
                height: 5px;
            }
        }

        @keyframes fall {
            0% {
                top: -100px;
                opacity: 0;
                height: 100px;
            }

            99% {
                opacity: 1;
            }

            100% {
                top: 150px;
                opacity: 0s;
                height: 5px;
            }
        }

        #ripples {
            position: absolute;
            width: 300px;
            height: 300px;
            transform: rotateX(75deg);
        }

        .ripple {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 1px;
            height: 1px;
            opacity: 0;
            border-radius: 50%;
            border-style: solid;
            border-width: 6px;
            border-color: rgba(255, 255, 255, 0.2);
            -webkit-animation-name: grow;
            animation-name: grow;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
        }

        .ripple:nth-child(1) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
        }

        .ripple:nth-child(2) {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
        }

        .ripple:nth-child(3) {
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
        }

        @-webkit-keyframes grow {
            0% {
                width: 1px;
                height: 1px;
                opacity: 0;
                transform: translateY(20px);
            }

            25% {
                opacity: 0.5;
                transform: translateY(-10px);
            }

            50% {
                transform: translateY(10px);
            }

            100% {
                width: 250px;
                height: 250px;
                opacity: 0;
                transform: translateY(0px);
            }
        }

        @keyframes grow {
            0% {
                width: 1px;
                height: 1px;
                opacity: 0;
                transform: translateY(20px);
            }

            25% {
                opacity: 0.5;
                transform: translateY(-10px);
            }

            50% {
                transform: translateY(10px);
            }

            100% {
                width: 250px;
                height: 250px;
                opacity: 0;
                transform: translateY(0px);
            }
        }

        .splash {
            position: absolute;
            margin: auto;
            width: 4px;
            height: 4px;
            border-radius: 2px;
            opacity: 0;
            background: #fff;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }

        .splash:nth-child(1) {
            -webkit-animation-name: bounce1;
            animation-name: bounce1;
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        .splash:nth-child(2) {
            -webkit-animation-name: bounce2;
            animation-name: bounce2;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .splash:nth-child(3) {
            -webkit-animation-name: bounce3;
            animation-name: bounce3;
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }

        @-webkit-keyframes bounce1 {
            0% {
                left: 150px;
                top: 150px;
                opacity: 0;
            }

            5% {
                opacity: 0.5;
            }

            50% {
                top: 123px;
            }

            100% {
                left: 199px;
                top: 150px;
                opacity: 0;
            }
        }

        @keyframes bounce1 {
            0% {
                left: 150px;
                top: 150px;
                opacity: 0;
            }

            5% {
                opacity: 0.5;
            }

            50% {
                top: 123px;
            }

            100% {
                left: 199px;
                top: 150px;
                opacity: 0;
            }
        }

        @-webkit-keyframes bounce2 {
            0% {
                left: 150px;
                top: 150px;
                opacity: 0;
            }

            5% {
                opacity: 0.5;
            }

            50% {
                top: 109px;
            }

            100% {
                left: 146px;
                top: 150px;
                opacity: 0;
            }
        }

        @keyframes bounce2 {
            0% {
                left: 150px;
                top: 150px;
                opacity: 0;
            }

            5% {
                opacity: 0.5;
            }

            50% {
                top: 109px;
            }

            100% {
                left: 146px;
                top: 150px;
                opacity: 0;
            }
        }

        @-webkit-keyframes bounce3 {
            0% {
                left: 150px;
                top: 150px;
                opacity: 0;
            }

            5% {
                opacity: 0.5;
            }

            50% {
                top: 104px;
            }

            100% {
                left: 130px;
                top: 150px;
                opacity: 0;
            }
        }

        @keyframes bounce3 {
            0% {
                left: 150px;
                top: 150px;
                opacity: 0;
            }

            5% {
                opacity: 0.5;
            }

            50% {
                top: 104px;
            }

            100% {
                left: 130px;
                top: 150px;
                opacity: 0;
            }
        }

        #forest {
            position: absolute;
            margin: auto;
            width: 100%;
            height: 100%;
            left: 100vw;
            -webkit-animation-name: panForest;
            animation-name: panForest;
            -webkit-animation-duration: 12s;
            animation-duration: 12s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        @-webkit-keyframes panForest {
            to {
                transform: translateX(-300vw);
            }
        }

        @keyframes panForest {
            to {
                transform: translateX(-300vw);
            }
        }

        .tree {
            position: absolute;
            background: #000;
            height: 120%;
        }

        .tree:nth-child(1) {
            width: 67px;
            transform: rotateZ(1deg);
            left: 176px;
        }

        .tree:nth-child(2) {
            width: 58px;
            transform: rotateZ(2deg);
            left: 354px;
        }

        .tree:nth-child(3) {
            width: 65px;
            transform: rotateZ(1deg);
            left: 618px;
        }
    </style>
</head>

<body>
    <div>
        <div id='bgr'></div>
        <div id='lake'>
            <div id='sploutch'>
                <div class='drop'></div>
                <div id='ripples'>
                    <div class='ripple'></div>
                    <div class='ripple'></div>
                </div>
                <div id='splashes'>
                    <div class='splash'></div>
                    <div class='splash'></div>
                    <div class='splash'></div>
                </div>
            </div>
        </div>
        <div id='raftHolder'>
            <div id='raft'>
                <div id='raftTop'></div>
                <div id='raftBottom'></div>
            </div>
        </div>
        <div id='raftRipples'>
            <div class='raftRipple'></div>
            <div class='raftRipple'></div>
        </div>
        <div id='raftReflection'>
            <div class='raftReflectionSegment'></div>
            <div class='raftReflectionSegment'></div>
            <div class='raftReflectionSegment'></div>
        </div>
        <!-- <div id='instructions'>Click somewhere<br />to add ripples</div> -->
        <div id='forest'>
            <div class='tree'></div>
            <div class='tree'></div>
            <div class='tree'></div>
        </div>
    </div>

    <script>
        var HEIGHT, WIDTH;
        var lake = document.getElementById("lake");
        window.addEventListener('resize', handleResize, false);
        handleResize();

        function handleResize() {
            HEIGHT = window.innerHeight,
                WIDTH = window.innerWidth;
        }

        onmousedown = function (event) {
            createRipples(event.pageX, event.pageY);
        }

        function createRipples(x, y) {
            var tx = x || Math.random() * WIDTH;
            var ty = y || (Math.random() + .5) * HEIGHT * .5;
            var spltch = document.getElementById("sploutch");
            var cln = spltch.cloneNode(true);
            cln.style.left = (tx - 150) + "px";
            cln.style.top = (ty - 150) + "px";
            lake.appendChild(cln);
            // remove it from the dom after a while
            setTimeout(function () {
                lake.removeChild(cln);
            }, 4000);
        }

        setInterval(createRipples, 300);

    </script>
</body>

</html>